<template>
    <div class="main">
        <a-form :inline="false" :model="formData" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" size="small"
            labelAlign="left">
            <a-collapse v-model="activeKey">
                <a-collapse-panel key="1">
                    <span slot="header" class="collapseHeader">
                        <a-icon type="setting" />基本设置
                    </span>
                    <a-form-item label="节点ID">
                        <a-input placeholder="请输入" :disabled="onlyRead" v-model="formData.id"></a-input>
                    </a-form-item>
                    <a-form-item label="节点名称">
                        <a-input placeholder="请输入" :disabled="onlyRead" v-model="formData.name"></a-input>
                    </a-form-item>
                    <a-form-item label="节点描述">
                        <a-textarea placeholder="请输入" v-model="formData.documentation"
                            :autoSize="{ minRows: 2, maxRows: 5 }" />
                    </a-form-item>
                    <a-form-item label="节点表单">
                        <a-select placeholder="请选择" v-model="formData.formId" allowClear>
                            <a-select-option v-for="item in fromList" :key="item.formId">
                                {{ item.formName }}--{{ item.formId }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="跳过表达式">
                        <a-input placeholder="请输入" :disabled="onlyRead" v-model="formData.skipExpression"></a-input>
                    </a-form-item>
                    <a-form-item label="多实例">
                        <a-badge :dot="showMultiInstance">
                            <a-button @click="showMulti">编辑</a-button>
                        </a-badge>
                        <multiinstance :loading="multiVisible" :element="element" :modeler="modeler" @show="showMulti"
                            @change="multiChange" />
                    </a-form-item>
                    <a-form-item label="任务监听">
                        <a-badge :count="taskListener.length" :number-style="{ backgroundColor: '#108ee9' }">
                            <a-button @click="showModal('task')">编辑</a-button>
                        </a-badge>
                    </a-form-item>
                </a-collapse-panel>
                <a-collapse-panel key="2" v-if="!!showConfig.userType">
                    <span slot="header" class="collapseHeader">
                        <a-icon type="user" />审核者
                    </span>
                    <a-form-item label="人员类型">
                        <a-select placeholder="请选择" v-model="formData.userType">
                            <a-select-option v-for="item in selectUserType" :key="item.value">
                                {{ item.label }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="指定方式">
                        <a-radio-group name="radioGroup" v-model="formData.dataType" @change="dataTypeOnChang">
                            <a-radio v-for="item in dataTypeOption" :key="item.value" :value="item.value">
                                {{ item.label }}
                            </a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item v-if="formData.userType"
                        :label="selectUserType.filter(item => item.value === formData.userType)[0].label">
                        <!-- <a-input placeholder="请选择" :disabled="onlyRead" v-model="formData.code">
                            <div slot="addonAfter">
                                <a-icon type="setting" @click="showDwp" />
                                <a-divider type="vertical" />
                                <a-icon type="setting" @click="showExp" />
                            </div>
                        </a-input> -->
                        <a-select v-if="formData.userType === 'assignee'" placeholder="请选择" v-model="formData.assignee">
                            <a-select-option v-for="item in users" :key="item.userId">
                                {{ item.nickName }}
                            </a-select-option>
                        </a-select>
                        <a-select v-if="formData.userType === 'candidateUsers'" placeholder="请选择" mode="multiple"
                            v-model="formData.candidateUsers">
                            <a-select-option v-for="item in users" :key="item.userId">
                                {{ item.nickName }}
                            </a-select-option>
                        </a-select>
                        <a-select v-if="formData.userType === 'candidateGroups'" placeholder="请选择" mode="multiple"
                            v-model="formData.candidateGroups">
                            <a-select-option v-for="item in groups" :key="item.roleId">
                                {{ item.roleName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    
                </a-collapse-panel>

                <!-- <a-collapse-panel key="4">
                    <span slot="header" class="collapseHeader">
                        <a-icon type="customer-service" />任务监听
                    </span>
                    <a-icon slot="extra" type="plus" @click.stop="showModal('task')" />
                    <a-table :columns="listeningColumns" :rowKey="(record, index) => { return index }"
                        :dataSource="taskListener" bordered>
                        <span slot="operate" slot-scope="text,scope,index" @click="removeTaskListener(index)">删除</span>
                    </a-table>
                </a-collapse-panel> -->
            </a-collapse>
        </a-form>
        <dwpModules :loading="dwpVisible" @show="showDwp" />
        <expressionModules :loading="expVisible" @show="showExp" />
        <taskListeningModules ref="task" @setData="setTaskListener" :taskListener="taskListener" />
    </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel"
import dwpModules from "./modules/dwpModules.vue"
import expressionModules from "./modules/expressionModules.vue"
import taskListeningModules from "./modules/taskListeningModules.vue"
import multiinstance from "./modules/multiinstance.vue"
import { commonParse, userTaskParse } from '../../common/parseElement'
export default {
    mixins: [mixinPanel],
    props: {
        onlyRead: {
            type: Boolean,
            default: false
        },
        users: {
            type: Array,
            required: true
        },
        groups: {
            type: Array,
            required: true
        },
        fromList: {
            type: Array,
            required: true
        }
    },
    components: {
        dwpModules,
        expressionModules,
        taskListeningModules,
        multiinstance
    },
    data() {
        return {
            formData: {
                id: '',
                name: '',
                code: '',
                userType: '',
                sign: 0,
                dataType: '',
                assignee: [],
                candidateUsers: [],
                candidateGroups: [],
            },
            taskListener: [],
            dataTypeOption: [
                { label: '固定', value: 'fixed' },
                { label: '动态', value: 'dynamic' }
            ],
            selectUserType: [
                { label: '指定人员', value: 'assignee' },
                { label: '候选人员', value: 'candidateUsers' },
                { label: '候选组', value: 'candidateGroups' }
            ],
            selectSign: [
                {
                    label: "无",
                    value: 0
                }, {
                    label: "并行多重事件",
                    value: 1
                }, {
                    label: "顺序多重事件",
                    value: 2
                }
            ],
            showMultiInstance: false,
            activeKey: ['1', '2']
        }
    },
    watch: {
        'formData.userType': function (val, oldVal) {
            if (oldVal) {
                const types = ['assignee', 'candidateUsers', 'candidateGroups']
                types.forEach(type => {
                    delete this.element.businessObject.$attrs[`flowable:${type}`]
                    delete this.formData[type]
                })
            }
        },
        'formData.sign': function (val) {
            if (val === '') val = null
            this.updateProperties({ 'flowable:sign': val })
        },
        'formData.dataType': function (val) {
            const that = this
            this.updateProperties({ 'flowable:dataType': val })
            if (val === 'dynamic') {
                this.updateProperties({ 'flowable:userType': that.formData.userType })
            }

            // 传值到父组件
            const params = {
                dataType: val,
                userType: this.formData.userType
            }
            this.$emit('dataType', params)
        },
        'formData.assignee': function (val) {
            if (this.formData.userType !== 'assignee') {
                delete this.element.businessObject.$attrs[`flowable:assignee`]
                return
            }
            this.updateProperties({ 'flowable:assignee': val })
        },
        'formData.candidateUsers': function (val) {
            if (this.formData.userType !== 'candidateUsers') {
                delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
                return
            }
            this.updateProperties({ 'flowable:candidateUsers': val?.join(',') })
        },
        'formData.candidateGroups': function (val) {
            if (this.formData.userType !== 'candidateGroups') {
                delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
                return
            }
            this.updateProperties({ 'flowable:candidateGroups': val?.join(',') })
        },
        'formData.skipExpression': function (val) {
            if (val === '') val = null
            this.updateProperties({ 'flowable:skipExpression': val })
        },
    },
    methods: {
        multiChange() {
            if (this.element.businessObject.loopCharacteristics) {
                this.showMultiInstance = true
            } else {
                this.showMultiInstance = false
            }
        },
        dataTypeOnChang() {
            // 切换时 删除之前选中的值
            const types = ['assignee', 'candidateUsers', 'candidateGroups']
            types.forEach(type => {
                delete this.element.businessObject.$attrs[`flowable:${type}`]
                delete this.formData[type]
            })
        },
        setTaskListener(val) {
            this.taskListener = val;
            this.updateElement("taskListener");
        },
        removeTaskListener(val) {
            this.taskListener.splice(val, 1)
            this.updateElement("taskListener");
        }
    },
    created() {
        let cache = commonParse(this.element)
        cache = userTaskParse(cache)
        this.formData = cache
        this.multiChange()
    },
    mounted() {
        this.getDataElement("taskListener");
    }
}
</script>

<style lang="less" scoped>

</style>